<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/app.css">
		<!--App自定义的css-->
		<style type="text/css">
			html, body{
				background: #fff;
			}
			.mui-content{
				display: none;
				position:relative;
				margin-top:44px;
				padding:0px!important;
			}
			.mui-content-padded,.mui-content-time{
				margin:5px 10px 0px 10px;	
			}
			.mui-content-time span{
				color:#000;/*#9fa41c;*/
				/*font-weight: 700;*/
			}
			.mui-huodong-list{
				float: left;
			}
			.mui-huodong-list p{
				margin:10px 0 0 0;
			}
			.mui-huodong-list:nth-child(2n){
				width:calc(50% - 20px);
				margin: 10px 10px 10px 0;
			}
			.mui-huodong-list:nth-child(2n+1){
				width:calc(50% - 10px);
				margin: 10px 10px;
			}
			.mui-huodong-list:nth-child(n+3){
				margin-top: 0px;
			}
			.mui-huodong-list img{
				height:220px;
			}
		</style>

	</head>

	<body>
		<div class="mui-bar mui-bar-nav">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
			<h1 class="mui-title">杂志</h1>
			<!--<span class="mui-icon mui-icon-more-filled mui-pull-right"></span>-->
		</div>
		<div class="mui-content mui-huodong" id="mui-huodong">
			<div class="mui-huodong-list" data-id="123">
				<img src="../images/banner05.jpg" width="100%" />
				<p>2017年第15期</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner06.jpg" width="100%" />
				<p>2017年第14期</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner03.jpg" width="100%" />
				<p>2017年第13期</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner04.jpg" width="100%" />
				<p>2017年第12期</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner01.jpg" width="100%" />
				<p>2017年第11期</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner02.jpg" width="100%" />
				<p>2017年第10期</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner07.jpg" width="100%" />
				<p>2017年第9期</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner08.jpg" width="100%" />
				<p>2017年第8期</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner09.jpg" width="100%" />
				<p>2017年第7期</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner10.jpg" width="100%" />
				<p>2017年第6期</p>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/castapp.js"></script>
	<script src="../js/myapp.js"></script>
	<script>
		ca.init();
		
		//接收通知消息
		ca.receiveNotice("shijian",function(event){
			//获取对象id
			var isLoading = event.detail.isLoading;
			if(isLoading == 1){
				//延时加载
				lazyLoading('mui-content');
			}
		});
		var mui_huodong_list = ca.className('mui-huodong-list');
		for (var i = 0, length = mui_huodong_list.length; i < length; i++) { //把每个button元素便利出来
            var button = mui_huodong_list[i];
            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
                button.addEventListener("tap", change)
            } else {
                button.attachEvent("tap", change)
            }
        }
        function change(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素
        	var thisEl = e.currentTarget;
        	console.log(thisEl.getElementsByTagName('p')[0].innerText);
        	console.log(thisEl.getElementsByTagName('img')[0].src);
        }
	</script>
</html>